<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div
        class="resource-view-1-box w-full h-full overflow-hidden box-border flex justify-start items-center flex-col"
      >
        <div
          class="content w-full h-[calc(100%_-_64px)] box-border p-[20px_24px] overflow-hidden overflow-y-auto"
        >
          <div
            class="w-full h-[35px] p-[16px_0] overflow-hidden box-border flex justify-start items-start"
            style="font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394d73"
          >
            <span>基础信息</span>
          </div>
          <div class="info w-full h-auto p-[20px] box-border bg-[#f7f9fc] rounded-[8px]">
            <a-form
              layout="inline"
              :model="handlerData"
              :rules="Rules"
              class="ckd-inner-form-box"
              label-align="left"
              ref="RefFormBox"
            >
              <a-row justify="space-between" class="w-full">
                <a-form-item label="资产规划" field="asset_planning">
                  <a-radio-group v-model="handlerData.asset_planning">
                    <a-radio value="无形资产">无形资产</a-radio>
                    <a-radio value="存货">存货</a-radio>
                    <a-radio value="可披露">可披露</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-row>

              <a-row justify="space-between" class="w-full">
                <a-form-item label="使用寿命" field="useful_life">
                  <SelectInput placeholder="请选择使用寿命" v-model="handlerData.useful_life">
                    <a-option v-for="item in serviceLifeOption" :key="item" :value="item">{{
                      item
                    }}</a-option>
                  </SelectInput>
                </a-form-item>
              </a-row>
              <a-row justify="space-between" class="w-full">
                <a-form-item label="计算公式" field="calculation_type">
                  <SelectInput placeholder="请选择计算公式" v-model="handlerData.calculation_type">
                    <a-option v-for="item in countFormulaOption" :key="item" :value="item">{{
                      item
                    }}</a-option>
                  </SelectInput>
                </a-form-item>
              </a-row>

              <a-row justify="space-between" class="w-full">
                <a-form-item label="判断依据" field="description">
                  <a-textarea
                    placeholder="请输入项目描述"
                    v-model="handlerData.description"
                    :max-length="400"
                    allow-clear
                    show-word-limit
                  />
                </a-form-item>
              </a-row>
              <a-row justify="space-between" class="w-full">
                <a-form-item label="上传附件" field="upload_file">
                  <TextInput
                    placeholder="请输入项目预算"
                    v-model="handlerData.upload_file"
                  ></TextInput>
                </a-form-item>
              </a-row>
              <a-row justify="space-between" class="w-full">
                <a-form-item label="摊销频次" field="amortization_frequency">
                  <SelectInput
                    placeholder="请选择摊销频次"
                    v-model="handlerData.amortization_frequency"
                  >
                    <a-option v-for="item in amortizePcOption" :key="item" :value="item">{{
                      item
                    }}</a-option>
                  </SelectInput>
                </a-form-item>
              </a-row>
              <a-row justify="space-between" class="w-full">
                <a-form-item label="摊销开始时间" field="amortization_time_start">
                  <DateInput class="search-item" v-model="handlerData.amortization_time_start">
                  </DateInput>
                </a-form-item>
              </a-row>
              <a-row justify="space-between" class="w-full">
                <a-form-item label="摊销时间点" field="amortization_time_point">
                  <TextInput
                    placeholder="格式：'日,月'例：12,*每月12号;1,1每年1月1号"
                    v-model="handlerData.amortization_time_point"
                  ></TextInput>
                </a-form-item>
              </a-row>
            </a-form>
          </div>
          <div
            class="w-full h-[56px] p-[16px_0] overflow-hidden box-border items-start make-plane"
            style="font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394d73"
          >
            <span>摊销计划</span>
            <span><a-button type="primary" size="small">生成计划</a-button></span>
          </div>
          <CommonTable
            :showPagination="false"
            :columnsData="showDetailTableData"
            :tableData="tableData"
            :loading="loading"
          >
          </CommonTable>
        </div>
        <div class="foot-class flex items-center justify-between">
          <div class="mr-10">
            <a-space>
              <a-button @click="callBack">取消</a-button>
              <a-button type="primary" @click="onCompleteClick">确认</a-button>
            </a-space>
          </div>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { showDetailTableData, Rules } from './values';
import {
  AmortizationFrequency,
  CalculationType,
  UsefulLife
} from './type';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref<boolean>(false);
// 表单数据
const handlerData = reactive({
  asset_package_id: 111,
  asset_planning: '无形资产',
  useful_life: '1年',
  calculation_type: '产量法',
  description: '1231',
  amortization_frequency: '年度',
  amortization_time_start: '2024-03-02',
  amortization_time_point: '12,*',
  upload_file: [], // 上传的附件单独判断
  asset_ru_biao_plan_data: []
});

const serviceLifeOption = ref<any>();
const countFormulaOption = ref<any>();
const amortizePcOption = ref<any>();

const tableData = ref<any>();
tableData.value = [];

/**
 * @method callBack 取消
 */
const callBack = () => {
  router.push({
    name: 'amortize'
  });
};

/**
 * @method onCompleteClick 完成
 */
const onCompleteClick = () => {
  console.log('完成');
};

onMounted(() => {
  serviceLifeOption.value = Object.values(UsefulLife);
  countFormulaOption.value = Object.values(CalculationType);
  amortizePcOption.value = Object.values(AmortizationFrequency);
});
</script>

<style lang="less" scoped>
.MainBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.TabPaneClass {
  padding: 0 30px;
}
.content {
  margin-bottom: 33px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #465a80;

  .icon {
    color: #a3b0cc;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: normal;
  }
  .text {
    padding-left: 16px;
    color: #465a80;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: normal;
  }
  .bule-text {
    color: #1459fa;
  }
}
.footer {
  border-top: 1px solid #ebf0fa;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
}
.circle-point {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
}

.ckd-inner-form-box {
  .arco-row {
    .arco-form-item {
      width: 50%;
      margin-top: 6px;
      :deep(.arco-form-item-label-col) {
        width: 120px;
      }
    }
  }
}
.make-plane {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foot-class {
  height: 68px;
  background: #ffffff;
  position: fixed;
  left: 220px;
  bottom: 0;
  width: calc(100vw - 220px);
  color: white;
  text-align: center;
  padding: 10px;
  box-shadow: 0 0 6px 0 rgba(57, 77, 115, 0.1);
  display: flex;
  justify-content: flex-end;
}
</style>
